<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js" th:src="@{/editor.md-master/examples/js/jquery.min.js}"></script>
    <script src="../editormd.js"  th:src="@{/editor.md-master/editormd.js}"></script>
    <script type="text/javascript" src="#" th:src="@{/bootstrap/js/bootstrap.js}"></script>
</head>
<body>
    <link rel="stylesheet" href="../css/editormd.css" th:href="@{/editor.md-master/css/editormd.css}" />
    <link rel="stylesheet" href="css/style.css" th:href="@{/editor.md-master/examples/css/style.css}"/>
    <link rel="stylesheet" href="#" th:href="@{/bootstrap/css/bootstrap.css}"/>
    <header>
        <!--<input type="text" th:value="${title}" />-->
        <input type="text" id="txtTitle" maxlength="100" th:value="${title}" style="font-size: medium;background-color: #efefef;width: 30%" >

    </header>
    <div class="btns">
        <button id="submit-btn" type="submit">发表文章</button>
        <button id="get-md-btn">Get Markdown</button>
        <button id="get-html-btn">Get HTML</button>
        <select id="selectTag" style="padding: 8px;">
            <option th:value="${tag.getId()}" th:each="tag:${tags}" th:selected=" ${currentTagId} ==  ${tag.getId()} ? 'selected'" >[[ ${tag.getName()}]]</option>
        </select>
        <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>-->
        <!--<button id="goto-line-btn">Goto line 90</button>-->
        <!--<button id="show-btn">Show editor</button>-->
        <!--<button id="hide-btn">Hide editor</button>-->
        <!--<button id="watch-btn">Watch</button>-->
        <!--<button id="unwatch-btn">Unwatch</button>-->
        <!--<button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>-->
        <!--<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>-->
        <!--<button id="show-toolbar-btn">Show toolbar</button>-->
        <!--<button id="close-toolbar-btn">Hide toolbar</button>-->
        <!--<button id="toc-menu-btn">ToC Dropdown menu</button>-->
        <!--<button id="toc-default-btn">ToC default</button>-->

    </div>

    <!--<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">-->

    <!--</div>-->
    <!-- #模态框 -- 标签选择/创建标签 -->

    <div id="editormd" class="editormd">
        <textarea style="display:none;" class = "testtt">[[ ${content} ]]</textarea>
    </div>

    <script type="text/javascript" th:inline="javascript">
        var testEditor;
        $(function() {
            testEditor = editormd("editormd", {
                path : '/editor.md-master/lib/',
                // Autoload modules mode, codemirror, marked... dependents libs path
                width: "90%",
                height: 740,
                theme : "dark",
                previewTheme : "dark",
                editorTheme : "pastel-on-dark",
                codeFold : true,
                //syncScrolling : false,
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                //watch : false,                // 关闭实时预览
                htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                //toolbar  : false,             //关闭工具栏
                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                emoji : true,
                taskList : true,
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/editor.md-master/examples/php/upload.php",

            });
        });

        $("#submit-btn").bind('click',function () {
            var id = [[ ${id} ]];
            var title = $("#txtTitle").val();
            var html = testEditor.getHTML();
            var markdown = testEditor.getMarkdown();
            var tagId = jQuery("#selectTag").val();
            // var tagName = jQuery("#selectTag  option:selected").text();
            // alert(tagName);
            // alert(tagId);
           $.ajax({
               url:"/submit",
               data:{
                   articleId:id,
                   title:title,
                   html:html,
                   markdown:markdown,
                   tagId:tagId,
                   // tagName:tagName,
               },
               success:function(data){
                   window.location.href="/home";
               },
           })
        });

        $("#get-md-btn").bind('click', function(){
            var markdown = testEditor.getMarkdown();
            $.ajax({
                url : "/getMarkdown" ,
                data:{markdown:markdown},//传入后台数据
                type : "POST",
            });
            alert(markdown);
        });

        $("#get-html-btn").bind('click', function() {
            var html = testEditor.getHTML();
            $.ajax({
                url : "/getHtml" ,
                data:{html:html},
                type : "POST",
            });
            alert(html);
        });

        // $("#goto-line-btn").bind("click", function(){
        //     testEditor.gotoLine(90);
        // });
        //
        // $("#show-btn").bind('click', function(){
        //     testEditor.show();
        // });
        //
        // $("#hide-btn").bind('click', function(){
        //     testEditor.hide();
        // });


        // $("#watch-btn").bind('click', function() {
        //     testEditor.watch();
        // });
        //
        // $("#unwatch-btn").bind('click', function() {
        //     testEditor.unwatch();
        // });
        //
        // $("#preview-btn").bind('click', function() {
        //     testEditor.previewing();
        // });

        // $("#fullscreen-btn").bind('click', function() {
        //     testEditor.fullscreen();
        // });

        // $("#show-toolbar-btn").bind('click', function() {
        //     testEditor.showToolbar();
        // });
        //
        // $("#close-toolbar-btn").bind('click', function() {
        //     testEditor.hideToolbar();
        // });
        //
        // $("#toc-menu-btn").click(function(){
        //     testEditor.config({
        //         tocDropdown   : true,
        //         tocTitle      : "目录 Table of Contents",
        //     });
        // });
        //
        // $("#toc-default-btn").click(function() {
        //     testEditor.config("tocDropdown", false);
        // });

    </script>
</body>
</html>